<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 全局引入 => 全局对象Vue -->
    <script src="../js/vue.global.js"></script>
    <style>
        .comp-a,
        .comp-b,
        .comp-c,
        .comp-d{
            padding: 10px;
            border: 1px dashed #333;
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <lw-a></lw-a>
        <lw-b></lw-b>
        <lw-c></lw-c>
    </div>
</body>
<script>
    var { createApp } = Vue;

   /* 
    混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
    全局混入  => 一次注册,所有组件都被混入 (不建议,每个组件都被混入,可能会造成内存占用)
        app.mixin({

        })

    局部混入 => 1.提前设置混入配置项  2. 组件按需循环

   
   
   
   */

    let mixinA = {
        data(){
            return {
                a:1
            }
        },
        computed: {
            doubleA(){
                return this.a * 2;
            }  
        },
        methods:{
            addA(){
                this.a++
            },
            reduceA(){
                this.a--
            }
        },
        mounted(){
            console.log("我是混入A中的mounted");
        }
    }

    let mixinB = {
        data(){
            return {
                b:2
            }
        },
        computed: {
            doubleB(){
                return this.b * 2;
            }  
        },
        methods:{
            addB(){
                this.b++
            },
            reduceB(){
                this.b--
            }
        },
    }

    let lwA = {
        mixins:[mixinA,mixinB],
        template: `<div class="comp-a">
            <h2>我是A组件</h2>
            <p>a:{{a}}</p>
            <p>doubleA:{{doubleA}}</p>
            <p>
                <button @click="addA">a++</button>
                <button @click="reduceA">a--</button>
            </p>
            <hr>
            <p>b:{{b}}</p>
            <p>doubleB:{{doubleB}}</p>
            <p>
                <button @click="addB">b++</button>
                <button @click="reduceB">b--</button>
            </p>
        </div>`,
        mounted(){
            console.log(this);
        }
    }

    /* 
        如果混入过程中出现冲突
        1. data methods computed components 和 directives 这些,会使用组件自身的
        2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
    
    */
    let lwB = {
        mixins:[mixinA],
        template: `<div class="comp-a">
            <h2>我是B组件</h2>
            <p>a:{{a}}</p>
            <p>doubleA:{{doubleA}}</p>
            <p>
                <button @click="addA">a++</button>
                <button @click="reduceA">a--</button>
            </p>
        </div>`,
        data(){
            return {
                a:10,
            }
        },
        mounted(){
            console.log("这是组件B中的mounted函数",this);
        }
        
    }

    let lwC = {
        mixins:[mixinA],
        template: `<div class="comp-a">
            <h2>我是C组件</h2>
            <p>a:{{a}}</p>
            <p>doubleA:{{doubleA}}</p>
            <p>
                <button @click="addA">a++</button>
                <button @click="reduceA">a--</button>
            </p>
        </div>`,
    }

    var app = createApp({
        data() {
            return {
                count: 1,
                showColor: "red",
            }
        },
        components: {
            lwA,
            lwB,
            lwC,
        }
    })

   

    app.mount("#app");



</script>

</html>